<template>
	<view class="login">
	  <view class="login-bd">
	    <view class="inner">
		  <view class="inner-top">
			<view class="info">验证码登录</view>
			<view>密码登录</view>
		  </view>
	      <input
	        class="ipt"
	        v-model="mobile"
	        type="text"
	        placeholder="请输入手机号"
			  maxlength="11"
	      />
	      <input
	        class="ipt"
	        v-model="code"
	        type="text"
	        placeholder="请输入验证码"
	      />
	      <view class="btn-code" v-show="!verfiInfo" @click="getCode">
	        获取验证码
	      </view>
			<view class="btn-code" v-show="verfiInfo">
				{{verfiInfo}}
			</view>
	      <view class="tips-txt">{{ tipMsg }}</view>
	    </view>
	    <button class="btn btn-login" @click="LoginTo">登录</button>
	  </view>
	  <view class="register">没有账号，立即注册</view>
	</view>
</template>

<script>
	import{sendcodeTop,mobileTop} from '../../utils/apis/user.js'
	export default {
	  data() {
	    return {
	      verfiInfo: '',
	      mobile: '',
	      code: '',
	      tipMsg: '',
	    };
	  },
	  methods: {
	    async getCode() {
	        if (this.checkMobile()) return;
	         const { code, msg } = await sendcodeTop ({ mobile: this.mobile })
	         if (code !== 10000) {
	             this.tipMsg = msg
	         } else {
	            this.countTime();
	         }
	    },
	    async LoginTo() {
	       if (this.checkMobile()) return;
	        const { code, msg, data,token} = await mobileTop({ mobile: this.mobile, code: this.code })
	         if (code !== 10000) {
	             this.tipMsg = msg
	         } else {
				 // console.log(1)
				// uni.navigateTo({
				// 	url: '/pages/index/index'
				// })
				uni.switchTab({  
					url: '/pages/index/index'
				});
				// console.log(2)
				 uni.setStorageSync('token', token)
				 uni.setStorageSync('member',data)
	         }
	    },
	    checkMobile() {
	      let reg = /^1([0-9])\d{9}$/;
	      if (reg.test(this.mobile)) {
	        this.tipMsg = '';
	      } else {
	        this.tipMsg = '手机号不合法';
	      }
	      return this.tipMsg;
	    },
	    countTime() {
	      const TIME = 1000;
	      let count = 60,
	        timer = null;
	      timer = setInterval(() => {
	        count--;
	        this.verfiInfo = `剩余${count}秒`;
	        if (count === 0) {
	          this.verfiInfo = "";
	          clearInterval(timer);
	        }
	      }, TIME);
	    }
	    
	  },
	};
</script>


<style lang="less">
.login {
  .header {
    .inner {
      color: #fff;
    }
  }
}
</style>
<style lang="less" scoped>
input::-webkit-input-placeholder {
  color: #555;
  font-size: 30rpx;
}
.login {
  height: 93vh;
  background: url(../../static/images/loginlogo.png) #f1f5f8 no-repeat
    center top;
  background-size: 100% ;
}
.register{
	text-align: center;
	margin-top: 80rpx;
}
.inner-top{
	display: flex;
	justify-content: space-around;
}
.login-bd {
  width: 90%;
  margin: 0 auto;
  padding-top: 100rpx;
  box-sizing: border-box;
}
.inner {
  position: relative;
  top: 15rpx;
  padding: 40rpx 0 100rpx;
  margin-bottom: 60rpx;
  border-radius: 23rpx;
  background-color: #fff;
}
.ipt {
  border: 0;
  width: 95%;
  margin-left: 25rpx;
  height: 150rpx;
  font-size: 30rpx;
  border-bottom: 1px solid #ebe9e9;
  &:nth-of-type(2) {
    width: 58%;
    border-bottom: 0;
  }
}
.info{
	text-align: center;
	font-weight: bold;
	font-size: 40rpx;
	margin-left: 200rpx;
}
.btn {
  display: block;
  margin: auto;
  width: 88%;
  height: 80rpx;
  border: 0;
}

.btn-code {
  border: 0;
  color: #0b4177;
  font-size: 28rpx;
  width: auto;
  position: absolute;
  top: 300rpx;
  right: 30rpx;
  background: transparent;
}
.btn-login {
  font-size: 30rpx;
  border-radius: 40rpx;
  background-color: #3ca1f8; 
   color: #fff;
}
.tips-txt {
  position: absolute;
  bottom: 8%;
  color: #f00;
  left: 50rpx;
  font-size: 30rpx;
}
</style>

